<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-06 16:28:56
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-10 14:14:30
 * @FilePath: \test\src\components\Header\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="header_content">
    <div class="weather_box">
      <div class="weather_item">
        <!-- <div class="img_box" :style="{backgroundImage: `url(${require('../../assets/images/weather/'+weather1+'.png')}`}"></div> -->
        <img :src="`/weather/${weather1}.png`" alt="" />
      </div>
      <div class="weather_item">
        <div class="value">
          <span class="num">{{humidity}}</span><span class="sub">%</span>
        </div>
        <div class="name">湿度</div>
      </div>
      <div class="weather_item">
        <div class="value">
          <span class="num">88</span><span class="sub">良</span>
        </div>
        <div class="name">空气</div>
      </div>
      <div class="weather_item">
        <div class="value">
          <span class="num">{{windPower}}</span><span class="sub">级</span>
        </div>
        <div class="name">{{windDirection}}风</div>
      </div>
    </div>
    <div class="title">{{ title }}</div>
    <div class="time_box">
      {{ nowTimes }}
    </div>
  </div>
</template>

<script setup>
import { useTimes } from "@/hooks/useTimes.js";
import { onMounted, getCurrentInstance, ref } from "vue";
let _this = getCurrentInstance().appContext.config.globalProperties;
let { nowTimes, y } = useTimes();
let title = "智慧社区可视化智慧大屏";
// 温度
let temperature = ref('');
let humidity = ref('');
let windPower = ref('');
let weather1 = ref('');
let windDirection = ref('');
const iconWeatherMap = {
  '大风': ['有风', '平静', '微风', '和风', '清风', '强风/劲风', '疾风', '大风', '烈风', '风暴', '狂爆风', '飓风', '热带风暴', '龙卷风'],
  '多云': ['少云', '晴间多云', '多云'],
  "小雪": ['小雪-中雪','雪', '阵雪', '小雪'],
  "中雪": ['中雪','中雪-大雪'],
  "大雪": ['大雪',],
  '暴雪': [  '暴雪',  '大雪-暴雪', '冷'],
  '雾': ['雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾'],
  '霾': ['浮尘', '扬沙', '沙尘暴', '强沙尘暴','阴', '霾', '中度霾', '重度霾', '严重霾', '未知'],
  '晴': ['晴', '热'],
  '雨夹雪': ['雨雪天气', '雨夹雪', '阵雨夹雪'],
  '大雨': [   '暴雨', '大暴雨', '特大暴雨', '强阵雨', '极端降雨', '暴雨-大暴雨', '大暴雨-特大暴雨', '冻雨'],
  "阵雨":['阵雨'],
  "小雨": ['小雨','毛毛雨/细雨', '雨', '小雨-中雨'],
  "中雨": ['中雨',  '中雨-大雨'],
  "雷电": ['雷阵雨', '雷阵雨并伴有冰雹', '强雷阵雨'],
}

/**
 * 根据天气现象返回其图标icon url
 * @param {String} weather 天气现象
 * @returns 天气现象对应的某一类的url
 */
function _getIcon (weather) {
  // 这个是icon的默认值
  let url = '中雪'

  for (const weatherKey in iconWeatherMap) {
    if (Object.hasOwnProperty.call(iconWeatherMap, weatherKey)) {
      const weatherNames = iconWeatherMap[weatherKey]
      const findWeatherItem = weatherNames.find(name => weather === name)
      // 如果找了某一类的图标了，那重新赋值url
      if (findWeatherItem) {
        // 这里的weatherKey和icon的名字一一对应了
        url = weatherKey
        // console.debug('@find weather key = ', weatherKey)
        break
      }
    }
  }

  return url
}
onMounted(() => {
  _this.$AMapLoader
    .load({
      key: "9900805441108295c4be4ba65c6b33cb", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
    .then((AMap) => {
      console.log(AMap, "Amap");
      //创建天气查询实例
      var Weather = new AMap.Weather();

      //执行实时天气信息查询
      Weather.getLive("沈阳市", function (err, data) {
        console.log(err, data,'杭州市');
        temperature.value = data.temperature;
        humidity.value = data.humidity;
        windPower.value = data.windPower;
        weather1.value = _getIcon(data.weather) ;
        windDirection.value = data.windDirection;
        console.log(weather1.value,'weather1');
      });
    })
    .catch((e) => {
    });
});
</script>

<style lang="scss" scoped>
.header_content {
  width: 100%;
  height: 242px;
  background: url("~@/assets/images/header.png");
  background-size: 100% 100%;
  position: relative;

  .title {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    // font-family: FZZiYYJW_2889503948;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    line-height: 80px;
  }
  .weather_box {
    display: inline-flex !important;
    position: relative;
    top: 10px;
    left: 20px;
    @include display(center, center, row);
    img {
      width: 74px;
      height: 100%;
    }

    .img_box{
      width: 74px;
      height: 100%;
      background-size: 100% 100%;
    }

    .weather_item {
      height: 100%;
      position: relative;
      @include display(center, flex-start, column);
      padding: 0 45px;
      .name {
        color: #14e6e6;
        font-size: 26px;
        transform: translateY(-6px);
      }
      .value {
        color: #fff;
        font-weight: bold;
        .num {
          font-size: 32px;
        }
        .sub {
          font-size: 24px;
        }
      }
    }
    // 选中第1、2、3个.weather_item并且添加伪元素
    .weather_item:nth-of-type(1)::after,
    .weather_item:nth-child(2)::after,
    .weather_item:nth-child(3)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 2px;
      height: 33px;
      background-color: rgba(60, 159, 176, 0.6);
      z-index: 99;
    }
  }
}
.time_box {
  font-size: 32px;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  top: 31px;
  right: 68px;
}
</style>
